<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>审批</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style type="text/css">
html {
	font-size: 16px !important;
}
</style>
</head>
<body>
	<div class="row">
		<div class="F-to">审核进程</div>
		<div class="D-progress">
			<div class="D-step clearfloat">
				<div class="D-stepbar icon-clock-1"></div>
			</div>
			<div class="D-step clearfloat">
				<div class="D-stepbar icon-okGray"></div>
				<div class="D-stepcontent">
					<div class="D-stepTitle clearfloat">
						<span class="D-stepTime rt">2020-05-06 16:47:13</span> <span
							class="D-stepUser">起草节点</span>
					</div>
					<div class="D-stepinfo">
						<p class="clearfloat">
							<span class="rt"></span> <span class="D-stepUser">张三</span>
						</p>
						<p class="clearfloat">南沙水司测试</p>
					</div>
				</div>
			</div>
			<div class="D-progress">
				<div class="D-step clearfloat">
					<div class="D-stepbar icon-clock-1"></div>
				</div>
				<div class="D-step clearfloat">
					<div class="D-stepbar icon-okGray"></div>
					<div class="D-stepcontent">
						<div class="D-stepTitle clearfloat">
							<span class="D-stepTime rt">2020-05-06 16:48:03</span> <span
								class="D-stepUser">审批节点一</span>
						</div>
						<div class="D-stepinfo">
							<p class="clearfloat">
								<span class="rt"></span> <span class="D-stepUser">张三</span>
							</p>
							<p class="clearfloat">子流程测试</p>
						</div>
					</div>
				</div>
				<div class="D-progress">
					<div class="D-step clearfloat">
						<div class="D-stepbar icon-clock-1"></div>
					</div>
					<div class="D-step clearfloat">
						<div class="D-stepbar icon-okGray"></div>
						<div class="D-stepcontent">
							<div class="D-stepTitle clearfloat">
								<span class="D-stepTime rt">2020-05-06 16:53:09</span> <span
									class="D-stepUser">起草节点</span>
							</div>
							<div class="D-stepinfo">
								<p class="clearfloat">
									<span class="rt"></span> <span class="D-stepUser">张三</span>
								</p>
								<p class="clearfloat">子流程测试</p>
							</div>
						</div>
					</div>
					</div>
					</div>
					<div class="D-progress">
						<div class="D-step clearfloat">
							<div class="D-stepbar icon-clock-1"></div>
						</div>
						<div class="D-step clearfloat">
							<div class="D-stepbar icon-okGray"></div>
							<div class="D-stepcontent">
								<div class="D-stepTitle clearfloat">
									<span class="D-stepTime rt">2020-05-06 16:55:12</span> <span
										class="D-stepUser">审批节点一</span>
								</div>
								<div class="D-stepinfo">
									<p class="clearfloat">
										<span class="rt"></span> <span class="D-stepUser">张三</span>
									</p>
									<p class="clearfloat">子流程测试</p>
								</div>
							</div>
						</div>
						<div class="D-progress">
							<div class="D-step clearfloat">
								<div class="D-stepbar icon-clock-1"></div>
							</div>
							<div class="D-step clearfloat">
								<div class="D-stepbar icon-okGray"></div>
								<div class="D-stepcontent">
									<div class="D-stepTitle clearfloat">
										<span class="D-stepTime rt">2020-05-06 16:59:30</span> <span
											class="D-stepUser">审批节点二</span>
									</div>
									<div class="D-stepinfo">
										<p class="clearfloat">
											<span class="rt"></span> <span class="D-stepUser">毕鑫</span>
										</p>
										<p class="clearfloat">子流程测试</p>
									</div>
								</div>
							</div>
						</div>
					</div>
					</div>
					</div>
					<style type="text/css" >

[class^="icon-"]:before, [class*=" icon-"]:before{
  margin-left: 0;
  position: relative;
}
.row .F-to:before{content: "";display: inline-block;width: 3px;background: #0093dd;height: .75rem;vertical-align: middle;margin-right: .3rem;}
.auditFlowDetail>div {
  background: #fff;
  padding: 1rem .75rem .75rem .75rem;
  border-bottom: 0;
}

.auditFlowDetail>div.row {
  width: 100%;
  margin: 0 0 .3rem 0;
}

.auditFlowDetail .D-user {
  box-shadow: 0px 3px 10px -2px #efefef;
  margin-bottom: 3px;
}

.auditFlowDetail .D-user>div {
  float: left;
}

.auditFlowDetail .D-user .D-left {
  width: 80%;
}

.auditFlowDetail .D-user .D-left .D-leftName {
  font-size: .9rem;
}

.auditFlowDetail .D-user .D-left p {
  font-size: .6rem;
  color: #666666;
}

.auditFlowDetail .D-user .D-right {
  width: 20%;
  color: #2bc5d9;
  font-size: .7rem;
  padding-top: .5rem;
  text-align: right;
}

.auditFlowDetail .row ul li {
  padding: .5rem 0;
  border-bottom: 1px solid #edf0f2;
  font-size: .7rem;
}

.auditFlowDetail .row ul li:last-child {
  border-bottom: 0;
}

.auditFlowDetail .row ul li span {
  display: inline-block;
}

.auditFlowDetail .row ul li .d-name {
  color: #999999;
  min-width: 3.5rem;
  text-align: justify;
  text-align-last: justify;
}

.auditFlowDetail .row ul li span.d-value {
  width: calc(100% - 5rem);
  vertical-align: top;
}

.auditFlowDetail .row ul li input.d-value, input.edit {
  height: 2em;
}

.auditFlowDetail .row ul li input.d-value, .auditFlowDetail .row ul li textarea.d-value,
input.edit {
  background-color: #fff;
  -webkit-appearance: none;
  border-radius: .2rem;
  outline: none;
  padding: 0 .5rem;
  border: 1px solid rgba(0, 0, 0, .2);
  width: calc(100% - 4rem);
  margin-bottom: 0;
}

.auditFlowDetail .row ul li textarea.d-value {
  vertical-align: text-top;
  min-height: 3.0rem;
}

.auditFlowDetail .row .flexbar {
  text-align: center;
  color: #e5e5e5;
  font-size: 1rem;
}

.auditFlowDetail .row .F-to {
  font-size: .75rem;
}

.auditFlowDetail .audit-progress {
  padding: 1rem 0 0 0;
}

.auditFlowDetail .audit-progress>div {
  border-bottom: .3rem solid #f0f3f5;
  padding: 1rem .75rem 0 .75rem;
}

.auditFlowDetail .audit-progress>div:first-child {
  padding-top: 0;
}

.auditFlowDetail .audit-progress>div:last-child {
  border-bottom: 0
}

.auditFlowDetail div.step-box {
  margin-bottom: 2.4rem;
}

.auditFlowDetail .D-step {
  padding-top: .7rem;
  position: relative;
}

.auditFlowDetail .D-step [class^="icon-"]:before, .auditFlowDetail .D-step  [class*=" icon-"]:before
{
  background-color: #fff;
}

.auditFlowDetail .D-step:not(:first-child){
  min-height: 4.35rem;
}

.auditFlowDetail .D-step:not(:first-child) .D-stepcontent {
  border-bottom: 1px solid #edf0f2;
}

.auditFlowDetail .D-step:before {
  content: " ";
  width: 1px;
  background: #e2e7ee;
  display: inline-block;
  position: absolute;
  height: 100%;
  top: 17px;
  left: 7px;
}

.auditFlowDetail .D-step>div {
  float: left;
}

.auditFlowDetail .D-step .D-stepbar {
  width: 1.25rem;
}

.auditFlowDetail .D-step .D-stepTitle {
  color: #8f8f94;
  font-size: .7rem;
}

.auditFlowDetail .D-step .D-stepTitle .D-stepUser {
  color: #2bc5d9;
}

.auditFlowDetail .D-step .D-stepcontent {
  width: calc(100% - 1.25rem - 1px);
}

.auditFlowDetail .D-step .D-stepcontent .D-stepinfo p {
  padding: .3rem 0;
}

.auditFlowDetail .D-step .D-stepbar {
  font-size: .75rem;
}

.auditFlowDetail .D-step .icon-okGray {
  color: #2bc5d9;
}

.auditFlowDetail .D-step .D-stepcontent .D-stepIdea {
  font-size: .7rem;
}

.auditFlowDetail .audit-footbtn {
  padding: 0;
  border-top: 1px solid #edf0f2;
}

.auditFlowDetail .audit-footbtn span {
  display: inline-block;
  width: 100%;
  text-align: center;
  color: #0093dd;
  font-size: .9rem;
}

.auditFlowDetail .D-progress {
  margin-bottom: 2.4rem;
}

@media only screen and (min-width: 400px) {
  html {
    font-size: 21.33333333px !important;
  }
}

@media only screen and (min-width: 414px) {
  html {
    font-size: 22.08px !important;
  }
}

@media only screen and (min-width: 480px) {
  html {
    font-size: 25.6px !important;
  }
}

</style>
</body>
</html>